<!-- 心之阴影页面 -->
<template>
  <view class="page" :style="{ backgroundImage: `url(${counterStore.bg_img})` }">
    <!-- 返回按钮 -->
    <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
      <view class="back-icon" @tap="goBack">
        <text class="iconfont">←</text>
      </view>
      <text class="page-title">心之阴影</text>
    </view>

    <view class="content">
      <!-- 牌阵说明 -->
      <view class="spread-info">
        <image class="avatar" src="/static/images/avatar.png" mode="aspectFit" />
        <text class="description">心之阴影牌阵可以帮助人们深入了解自己的内心阴影面，阴影面指的是我们潜意识中那些被压抑、否认或恐惧的部分自我。它们通常是那些我们无法接受、害怕或认为不符合社会期待的特质、欲望、情感和行为。通过探索潜意识中的情感、冲突和需求，从而促进自我成长和心理发展。</text>
      </view>

      <!-- 问题示例 -->
      <view class="example-section">
        <text class="section-title">提问示例：</text>
        <text class="example-text">怎么打开儿时的心结？</text>
      </view>

      <!-- 牌阵说明 -->
      <view class="spread-layout">
        <image class="avatar" src="/static/images/avatar.png" mode="aspectFit" />
        <view class="layout-description">
          <text>心之阴影牌阵通常由二十四张牌组成，包括：</text>
          <view class="card-meanings">
            <text class="card-position">第一张牌：代表童年，指未被处理的童年创伤。</text>
            <text class="card-position">第二张牌：代表家庭生活，涉及家庭角色与自我认知。</text>
            <text class="card-position">第三张牌：代表母亲原型，象征着母亲的滋养与接纳。</text>
            <text class="card-position">第四张牌：代表父亲原型，代表权威与独立性，象征着保护、秩序和逻辑思维。</text>
            <text class="card-position">第五张牌：代表兄弟姐妹，体现竞争与合作关系。</text>
            <text class="card-position">第六张牌：代表成长经历，反映习得的价值观与行为模式。</text>
            <text class="card-position">第七张牌：代表文化，涵盖文化影响下的信仰与行为。</text>
            <text class="card-position">第八张牌：代表宗教，涉及宗教的外化与内化。</text>
            <text class="card-position">第九张牌：代表社会，包含社会压力与内疾。</text>
            <text class="card-position">第十张牌：代表经历，关于过往经历的重构与情感释放。</text>
            <text class="card-position">第十一张牌：代表自我，荣格理论中的"自我"指个体的核心意识，代表着真实的自我，是意识的核心。</text>
            <text class="card-position">第十二张牌：代表恐惧，恐惧常源自内心的不安全感，可能来自过去的创伤或未解的情感困境。</text>
            <text class="card-position">第十三张牌：代表依附，是否过于依赖特定关系或身份，从而阻碍了你的自由和成长。</text>
            <text class="card-position">第十四张牌：代表厌恶，厌恶情感往往反映出个体未解决的内心冲突或自我拒绝，面对这些情感有助于实现自我接纳。</text>
            <text class="card-position">第十五张牌：代表习惯，习惯是通过反复行为习得的，改变习惯需要培养自我控制能力，用新的行为模式取代旧的行为。</text>
            <text class="card-position">第十六张牌：代表抱负，体现真实自我与外界期待的冲突。</text>
            <text class="card-position">第十七张牌：代表思维模式，思维模式直接影响个体的决策和情感反应，识别和改变消极思维模式有助于减少焦虑和抑郁症状。</text>
            <text class="card-position">第十八张牌：代表信念体系，个体的信念体系影响着他们对生活的理解和行动的方向，探讨其来源与合理性很重要。</text>
            <text class="card-position">第十九张牌：代表欲望，欲望常常是未满足需求的外在表现，反映个体内心的渴望和追求。</text>
            <text class="card-position">第二十张牌：代表当前状态，反映了个体的潜意识需求，通过内省与自我探索可揭示内心未解的情感和冲突。</text>
            <text class="card-position">第二十一张牌：代表关系，依据依恋理论评估人际关系中的边界是否健康，是否存在过度依赖或不对等的关系模式。</text>
            <text class="card-position">第二十二张牌：代表投射，是自我接纳，探索你在他人身上看到却知拒绝承认的特质。</text>
            <text class="card-position">第二十三张牌：代表反馈，你的行为是基于真实自我还是取悦他人。</text>
            <text class="card-position">第二十四张牌：代表阴影，被压抑或否认的部分自我。</text>
          </view>
        </view>
      </view>

      <!-- 开始按钮 -->
      <view class="bottom-tip">
        <image class="avatar" src="/static/images/avatar.png" mode="aspectFit" />
        <text>接下来，请集中注意力，心里默念你的问题，凭你的直觉抽取24张塔罗牌。</text>
      </view>

      <view class="button-group">
        <button class="action-button" @tap="navigateToAIReading">自助解牌</button>
        <button class="action-button primary" @tap="startDrawing">开始抽牌</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {useCounterStore} from '@/store/counter'

const counterStore = useCounterStore()

// 获取安全区域
const { safeAreaInsets } = uni.getSystemInfoSync()

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    fail: () => {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  })
}

// 跳转到卡牌选择页面
const startDrawing = () => {
  uni.navigateTo({
    url: '/pages/card-select/card-select?count=24&spread=shadow',
    fail: (err) => {
      console.error('跳转失败:', err)
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      })
    }
  })
}

// 跳转到AI解牌页面
const navigateToAIReading = () => {
  uni.navigateTo({
    url: '/pages/payment/payment',
    fail: (err) => {
      console.error('跳转失败:', err)
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      })
    }
  })
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  color: #fff;
}

.navbar {
  position: relative;
  display: flex;
  align-items: center;
  height: 12vw;
  background: rgba(26, 26, 46, 0.8);
  backdrop-filter: blur(10px);
}

.back-icon {
  position: absolute;
  left: 4vw;
  width: 8vw;
  height: 8vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5vw;
}

.page-title {
  flex: 1;
  text-align: center;
  font-size: 4vw;
  font-weight: bold;
}

.content {
  padding: 4vw;
}

.spread-info, .example-section, .spread-layout, .bottom-tip {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3vw;
  padding: 4vw;
  margin-bottom: 4vw;
}

.avatar {
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
  margin-right: 3vw;
}

.description, .example-text {
  flex: 1;
  font-size: 3.2vw;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.section-title {
  display: block;
  font-size: 3.6vw;
  font-weight: bold;
  margin-bottom: 2vw;
  color: #ff3366;
}

.card-meanings {
  margin-top: 3vw;
}

.card-position {
  display: block;
  font-size: 3.2vw;
  line-height: 2;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2vw;
  padding: 2vw;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2vw;
}

.button-group {
  display: flex;
  gap: 3vw;
  margin-top: 6vw;
  padding-bottom: 6vw;
}

.action-button {
  flex: 1;
  height: 11vw;
  line-height: 11vw;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2vw;
  font-size: 3.2vw;
  color: #fff;
}

.action-button.primary {
  background: linear-gradient(45deg, #6b66ff, #a366ff);
}

.spread-info, .example-section, .spread-layout, .bottom-tip {
  display: flex;
  align-items: flex-start;
}

.layout-description {
  flex: 1;
  font-size: 3.2vw;
  line-height: 1.6;
}

/* 添加渐变色效果 */
.card-position:nth-child(1) { background: linear-gradient(45deg, rgba(255, 102, 102, 0.1), rgba(255, 102, 102, 0.05)); }
.card-position:nth-child(2) { background: linear-gradient(45deg, rgba(255, 153, 102, 0.1), rgba(255, 153, 102, 0.05)); }
.card-position:nth-child(3) { background: linear-gradient(45deg, rgba(255, 204, 102, 0.1), rgba(255, 204, 102, 0.05)); }
.card-position:nth-child(4) { background: linear-gradient(45deg, rgba(204, 255, 102, 0.1), rgba(204, 255, 102, 0.05)); }
.card-position:nth-child(5) { background: linear-gradient(45deg, rgba(102, 255, 102, 0.1), rgba(102, 255, 102, 0.05)); }
.card-position:nth-child(6) { background: linear-gradient(45deg, rgba(102, 255, 204, 0.1), rgba(102, 255, 204, 0.05)); }
.card-position:nth-child(7) { background: linear-gradient(45deg, rgba(102, 204, 255, 0.1), rgba(102, 204, 255, 0.05)); }
.card-position:nth-child(8) { background: linear-gradient(45deg, rgba(102, 153, 255, 0.1), rgba(102, 153, 255, 0.05)); }
.card-position:nth-child(9) { background: linear-gradient(45deg, rgba(153, 102, 255, 0.1), rgba(153, 102, 255, 0.05)); }
.card-position:nth-child(10) { background: linear-gradient(45deg, rgba(204, 102, 255, 0.1), rgba(204, 102, 255, 0.05)); }
.card-position:nth-child(11) { background: linear-gradient(45deg, rgba(255, 102, 255, 0.1), rgba(255, 102, 255, 0.05)); }
.card-position:nth-child(12) { background: linear-gradient(45deg, rgba(255, 102, 204, 0.1), rgba(255, 102, 204, 0.05)); }
.card-position:nth-child(13) { background: linear-gradient(45deg, rgba(255, 102, 153, 0.1), rgba(255, 102, 153, 0.05)); }
.card-position:nth-child(14) { background: linear-gradient(45deg, rgba(255, 153, 153, 0.1), rgba(255, 153, 153, 0.05)); }
.card-position:nth-child(15) { background: linear-gradient(45deg, rgba(255, 204, 153, 0.1), rgba(255, 204, 153, 0.05)); }
.card-position:nth-child(16) { background: linear-gradient(45deg, rgba(204, 255, 153, 0.1), rgba(204, 255, 153, 0.05)); }
.card-position:nth-child(17) { background: linear-gradient(45deg, rgba(153, 255, 153, 0.1), rgba(153, 255, 153, 0.05)); }
.card-position:nth-child(18) { background: linear-gradient(45deg, rgba(153, 255, 204, 0.1), rgba(153, 255, 204, 0.05)); }
.card-position:nth-child(19) { background: linear-gradient(45deg, rgba(153, 204, 255, 0.1), rgba(153, 204, 255, 0.05)); }
.card-position:nth-child(20) { background: linear-gradient(45deg, rgba(153, 153, 255, 0.1), rgba(153, 153, 255, 0.05)); }
.card-position:nth-child(21) { background: linear-gradient(45deg, rgba(204, 153, 255, 0.1), rgba(204, 153, 255, 0.05)); }
.card-position:nth-child(22) { background: linear-gradient(45deg, rgba(255, 153, 255, 0.1), rgba(255, 153, 255, 0.05)); }
.card-position:nth-child(23) { background: linear-gradient(45deg, rgba(255, 153, 204, 0.1), rgba(255, 153, 204, 0.05)); }
.card-position:nth-child(24) { background: linear-gradient(45deg, rgba(255, 204, 204, 0.1), rgba(255, 204, 204, 0.05)); }
</style> 